<template>
	<div class="dashboard-container">
		<!-- 按钮区域 -->
		<div class="action-buttons">
			<button class="action-button" :class="{ 'active': activeComponent === 'ClientRegistration' }"
				@click="switchComponent('ClientRegistration')">
				<i class="icon icon-money"></i> 客户登记
			</button>
			<button class="action-button" :class="{ 'active': activeComponent === 'ContractManagement' }"
				@click="switchComponent('ContractManagement')">
				<i class="icon icon-document"></i> 合同管理
			</button>
			<button class="action-button" :class="{ 'active': activeComponent === 'PaymentManagement' }"
				@click="switchComponent('PaymentManagement')">
				<i class="icon icon-document"></i>回款管理
			</button>
		</div>

		<!-- 组件区域 -->
		<div class="section-content">
			<ClientRegistration v-if="activeComponent === 'ClientRegistration'" />
			<ContractManagement v-if="activeComponent === 'ContractManagement'" />
			<PaymentManagement v-if="activeComponent === 'PaymentManagement'" />
		</div>
	</div>
</template>

<script>
	// 1. 导入子组件  
	import ClientRegistration from '@/components/ClientRegistration.vue';
	import ContractManagement from '@/components/ContractManagement.vue';
	import PaymentManagement from '@/components/PaymentManagement.vue';
	export default {
		components: {
			ClientRegistration,
			ContractManagement,  
			PaymentManagement  
		},
		data() {
			return {
				activeComponent: 'ClientRegistration', 
			}
		},
		methods: {
			// 3. 切换组件  
			switchComponent(component) {
				console.log(component)
				this.activeComponent = component;
			}
		}

	}
</script>

<style>
	.dashboard-container {
		padding: 20rpx;
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.action-button {
		padding: 10rpx 30rpx;
		border-radius: 8rpx;
		background-color: #f0f0f0;
		border: none;
	}

	.action-button.active {
		background-color: #5470c6;
		color: white;
	}

	.section-content {
		margin-top: 30rpx;
	}
</style>
